<template>
<view class="page-container">
  <view class="receipt-info">
    <uni-file-picker
      v-model="receiptPictures"
      file-extname="jpg,webp,gif,png"
      limit="3"
      title="请拍照上传回单凭证"
      @select="selectReceipt"
    ></uni-file-picker>
    <uni-file-picker
      file-extname="jpg,webp,gif,png"
      limit="3"
      title="请拍照上传货品照片"
      v-model="goodsPictures"
      @select="selectGoods"
    ></uni-file-picker>
  </view>
  <button :disabled="!enableSubmit" class="button" @click="submit">提交</button>
</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { postDriverTasksdTakeDeliveryAPI } from '../../api/task'

//  司机作业id
const id = ref('')
// 提货凭证图片
const receiptPictrues = ref([])
// 货品图片
const goodsPictrues = ref([])

onLoad((e) => {
  id.value = e.ids
})


// 获取上传状态 提货凭证图片
const selectReceipt = (e) => {
  console.log(e);
    e.tempFiles.map(item => {
      receiptPictrues.value = item
    })
}
// 获取上传状态 货品图片
const selectGoods = (e) => {
  console.log(e);
    e.tempFiles.map(item => {
      goodsPictrues.value = item
    })
  }





// 数据验证
const enableSubmit = computed(() => {
  return goodsPictrues.value.length !==0 && receiptPictrues.value.length !==0

})
console.log(goodsPictrues.value,111);
console.log(receiptPictrues.value,222);
console.log(enableSubmit,333);


// // 数据二次处理，只保留 url 属性
// const cargoPickUpPictureList = computed(() => {
//   return receiptPictrues.value.map(({ url }) => {
//     return { url }
//   })
// })



// // 数据二次处理，只保留 url 属性
// const cargoPictureList = computed(() => {
//   return goodsPictrues.value.map(({ url }) => {
//     return { url }
//   })
// })






// 提交按钮
const submit = async () => {
  // 判断是否为空
  if (goodsPictrues.value  || receiptPictrues.value ) {
    


    if (Array.isArray(goodsPictrues.value) && Array.isArray(receiptPictrues.value) &&
    (goodsPictrues.value.length > 0 || receiptPictrues.value.length > 0)) {
    // 在这里继续你的代码
  // 转换前端数据为后端需要的格式
    const cargoPickUpPictureList = receiptPictrues.value.map(({ url }) => ({ url }));
    const cargoPictureList = goodsPictrues.value.map(({ url }) => ({ url }));

    await postDriverTasksdTakeDeliveryAPI(id.value,cargoPickUpPictureList,cargoPictureList);

    }
    // 消息提示
    uni.showToast({ title: '操作成功' });

    // 返回上一页
    setTimeout(() => {
      // 去到任务列表
    uni.reLaunch({ url: '/subpkg_task/detail/index?id=' + id.value })
    }, 1000);


  } else {
    return uni.showToast({
      title: '请上传图片',
      icon: 'none',
    });
  
  }
};







</script>


<style lang="scss" scoped>
.page-container {
  padding: 30rpx;
  background-color: #f4f4f4;
  height: 95vh;
}

.receipt-info {
  min-height: 600rpx;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-radius: 16rpx;

  ::v-deep .uni-file-picker {
    margin-bottom: 30rpx;
  }
}

.button {
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  /* #ifdef APP */
  padding-top: 4rpx;
  /* #endif */
  border-radius: 100rpx;
  margin-top: 60rpx;
  color: #fff;
  font-size: 28rpx;
  background-color: red;

  &[disabled],
  &.disabled {
    color: #fff;
    background-color: #fadcd9;
  }
}
</style>
